<!DOCTYPE html>
<html xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout" xmlns:th="http://www.thymeleaf.org"
      layout:decorate="~{admin/layout}">
<body>

<div class="content-wrap" layout:fragment="content">
    <style>
        .label{
            display: inline-block;
            width: 4%;
        }
        .btn-danger {
            color: #fff;
            background-color: #dd5826;
            border-color: #dd5826;
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.075);
        }
    </style>
    <main id="content" class="content" role="main">
        <ol class="breadcrumb">
            <li>苗木管理</li>
            <li class="active">编辑地块</li>
        </ol>
        <div class="row">
            <div class="col-lg-8 col-lg-offset-1">
                <section class="widget">
                    <header>
                        <h5>
                            编辑地块
                        </h5>
                        <div class="widget-controls">
                            <a data-widgster="collapse" title="Collapse" href="#"><i class="glyphicon glyphicon-chevron-down"></i></a>
                            <a data-widgster="close" title="Close" href="#"><i class="glyphicon glyphicon-remove"></i></a>
                        </div>
                    </header>
                    <div class="widget-body" style="margin-left: 0;">
                        <fieldset>
                            <div class="form-group row">
                                <label class="col-md-4 form-control-label text-md-right">编号:</label>
                                <div class="col-md-7">
                                    <input type="text" class="form-control" id="name">
                                </div>
                            </div>
                            <div class="form-group row">
                                <label class="col-md-4 form-control-label text-md-right">X坐标:</label>
                                <div class="col-md-7">
                                    <input type="text" class="form-control" id="xpos"
                                           onkeyup="value=value.replace(/[^\d.]/g,'')">
                                </div>
                            </div>
                            <div class="form-group row">
                                <label class="col-md-4 form-control-label text-md-right">Y坐标:</label>
                                <div class="col-md-7">
                                    <input type="text" class="form-control" id="ypos"
                                           onkeyup="value=value.replace(/[^\d.]/g,'')">
                                </div>
                            </div>
                            <div class="form-group row">
                                <label class="col-md-4 form-control-label text-md-right">高(单位:m)</label>
                                <div class="col-md-7">
                                    <input type="text" class="form-control" id="height"
                                           onkeyup="value=value.replace(/[^\d.]/g,'')">
                                </div>
                            </div>
                            <div class="form-group row">
                                <label class="col-md-4 form-control-label text-md-right">宽(单位:m)</label>
                                <div class="col-md-7">
                                    <input type="text" class="form-control" id="width"
                                           onkeyup="value=value.replace(/[^\d.]/g,'')">
                                </div>
                            </div>
                            <div class="col-md-offset-4 col-md-7">
                                <input type="submit" value="添加地块" id="addsubmit" class="btn btn-info width-100 mb-xs" role="button">
                                <input type="submit" value="修改地块" id="updatesubmit" class="btn btn-primary width-100 mb-xs" role="button">
                                <input type="submit" value="删除地块" id="delsubmit" class="btn btn-danger width-100 mb-xs" role="button">
                                <input type="submit" value="上传地块" id="uploadsubmit" class="btn btn-success width-100 mb-xs" role="button">
                            </div>
                        </fieldset>
                    </div>
                </section>
            </div>
        </div>
        <div >
            <canvas id="c2" width="11900" height="11700"> <!--宽高写在html里，写在css里有问题-->
                <span>该浏览器不支持canvas内容</span> <!--对于不支持canvas的浏览器显示-->
            </canvas>
        </div>
        <script th:inline="javascript">
            var oC = document.getElementById('c2');
            var canvas = oC.getContext('2d');
            var arrs=new Array();
            var scalearrs=new Array();
            var scale=1;
            var flush=function () {
                canvas.clearRect(0, 0, 11920, 11720);
                scalearrs=new Array();
                for(var i=0;i<arrs.length;i++){
                    scalearrs.push(new Area(arrs[i].name,arrs[i].x*scale,arrs[i].y*scale,arrs[i].w*scale,arrs[i].h*scale));
                }
                for(var i=0;i<scalearrs.length;i++){
                    var obj=scalearrs[i];
                    drawArea(obj.x,obj.y,obj.w,obj.h);
                    canvas.strokeText(obj.name + "", obj.x + obj.w / 2.0 - 5, obj.y + obj.h / 2.0 + 5);
                }
            };
            oC.onmousedown = function(ev){
                var e = ev || window.event;//获取event对象
                var rect = oC.getBoundingClientRect();
                var x = e.clientX - rect.left * (oC.width / oC.width);
                var y = e.clientY - rect.top * (oC.height / oC.height);
                var index=findArea(x, y);
                if(index!=-1){
                    drag(index);
                }else{
                    oC.onmousemove = null;
                    oC.onmouseup = null;
                }
            };
            drag=function (index) {
                oC.onmousemove = function (ev) {
                    var e = ev || window.event;//获取event对象
                    var rect = oC.getBoundingClientRect();
                    var x = e.clientX - rect.left * (oC.width / oC.width);
                    var y = e.clientY - rect.top * (oC.height / oC.height);
                    console.log("name",arrs[index].name)
                    arrs[index].x=x/scale;
                    arrs[index].y=y/scale;
                    $("#name").val(arrs[index].name);
                    $("#xpos").val(arrs[index].x);
                    $("#ypos").val(arrs[index].y);
                    $("#width").val(arrs[index].w);
                    $("#height").val(arrs[index].h);
                    flush();
                };
                oC.onmouseup = function(){
                    oC.onmousemove = null;
                    oC.onmouseup = null;
                };
            };
            oC.addEventListener('click', function (ev) {
                var e = ev || window.event;//获取event对象
                var rect = oC.getBoundingClientRect();
                var x = e.clientX - rect.left * (oC.width / oC.width);
                var y = e.clientY - rect.top * (oC.height / oC.height);
                var index = findArea(x, y);
                if (index != -1) {
//                   alert(scalearrs[index].name+[[${session.id}]]);
                   location.href="/admin/areaLocation/toSmalldivide?areaid="+scalearrs[index].name;
                }
            }, false);
            findArea = function (x, y) {
                console.log("x:" + x + "y:" + y);
                if (scalearrs == null)return -1;
                else {
                    var len = scalearrs.length;
                    for (var i = 0; i < len; i++) {
                        if (x > scalearrs[i].x && x < scalearrs[i].x + scalearrs[i].w && y > scalearrs[i].y && y < scalearrs[i].y + scalearrs[i].h) {
                            return i;
                        }
                    }
                }
                return -1;
            };
            drawArea = function (x,y,w,h) {
                canvas.strokeStyle = "green";
                canvas.lineWidth = 1;
                canvas.strokeRect(x, y, w, h);
            };
            function Area(name,x, y, w, h) {
                this.name=name;
                this.x = x;
                this.y = y;
                this.w = w;
                this.h = h;
            }
            $.ajax({
                url: "/admin/areaLocation/listArea",
                type: 'POST',
                async: false,
                success: function (data) {
                    var res=data.res;
                    for(var i=0;i<res.length;i++){
                        var obj=res[i];
                        arrs.push(new Area(obj.serialNumber,obj.xpos,obj.ypos,obj.breadth,obj.length))
                    }
                    flush();
                },
                error: function (xhr) {
                    console.log("error");
                }
            });
            $("#addsubmit").click(function () {
                arrs.push(new Area($("#name").val(),$("#xpos").val(),$("#ypos").val(),$("#width").val(),$("#height").val()));
                flush();
            });

            $("#updatesubmit").click(function () {
                for(var i=0;i<arrs.length;i++){
                    if(arrs[i].w!=0&&arrs[i].h!=0){
                        if(arrs[i].name==$("#name").val()){
                            arrs[i].x=$("#xpos").val();
                            arrs[i].y=$("#ypos").val();
                            arrs[i].w=$("#width").val();
                            arrs[i].h=$("#height").val();
                        }
                    }
                }
                flush();
            });
            $("#delsubmit").click(function () {
                for(var i=0;i<arrs.length;i++){
                    if(arrs[i].name==$("#name").val()){
                        arrs[i].x=0;
                        arrs[i].y=0;
                        arrs[i].w=0;
                        arrs[i].h=0;
                        scalearrs[i].x=0;
                        scalearrs[i].y=0;
                        scalearrs[i].w=0;
                        scalearrs[i].h=0;
                        $.ajax({
                            url: "/api/batch/delareabyname?name="+$("#name").val(),
                            type: 'GET',
                            async: false,
                            success: function (data) {
                                alert('删除成功');
                            },
                            error: function (xhr) {
                                console.log("error");
                            }
                        });
                    }
                }

                flush();
            });
            $("#uploadsubmit").click(function () {
                console.log("json", JSON.stringify(arrs));
                $.ajax({
                    url: "/admin/areaLocation/savearea",
                    contentType: "application/json; charset=utf-8",
                    data:JSON.stringify(arrs),
                    type: 'POST',
                    async: false,
                    success: function (data) {
                        console.log("data", data);
                        alert('上传成功');
                    },
                    error: function (xhr) {
                        console.log("error");
                    }
                });
            })
        </script>
    </main>
</div>
</body>
</html>
